<template>
  <div class="wapper">
    <affix :label="$t('configLazyLoad.qualityCheck.addCondition')">
      <add
      @save="saveQualityCheckCycle">
      </add>
    </affix>
    <affix :label="$t('configLazyLoad.qualityCheck.qualityCycleList')">
     <cycle-table
     :initTable="tableData"
     @change="changeActive"
     @show="showDetail">
     </cycle-table>
    </affix>
    <div class="detail">
       <component
      :is="detail"
      :dialogVisible="dialogVisible"
      @close="closeDialog"
      :cycleDetailTable="cycleDetailTable">
      </component>
    </div>
  </div>
</template>

<script>
  import Affix from '@/components/ui-modules/affix/Affix'
  import { getFormatDateTime, getDateTime } from '@/utils/m7Utils'
  import Add from '../curd/quality-cycle/Add'
  import Detail from '../curd/quality-cycle/Detail'
  import CycleTable from '../curd/quality-cycle/Table'
  export default {
    name: 'qualityCycle',
    data () {
      return {
        detail: '',
        dialogVisible: false,
        cycleDetailTable: [],
        tableData: []
      }
    },
    methods: {
      closeDialog () {
        this.dialogVisible = false
      },
      changeActive (row) {
        let req = {
          cycleId: row._id,
          active: !row.active
        }
        this.$store.dispatch('changeQualityCheckCycleStatus', req)
        .then(resp => {
          this.getTableData()
        })
      },
      saveQualityCheckCycle (form) {
        let req = JSON.parse(JSON.stringify(form))
        if (this.isCycleInterval) {
          req.cycleInterval = this.cycleInterval
        }
        req.cycleBegins = getDateTime(new Date(req.cycleBegins), 'date')
        req.cycleEnds = getDateTime(new Date(req.cycleEnds), 'date')
        this.$store.dispatch('saveQualityCheckCycle', req)
        .then(resq => {
          if (resq.success) {
            this.$message.success(this.$t('configLazyLoad.qualityCheck.addSuccess'))
            this.getTableData()
          }
        })
      },
      getTableData (req = {
        page: 1,
        pageSize: 10
      }) {
        this.$store.dispatch('queryQualityCheckCycle', req).then(res => {
          console.log(res)
          if (res) {
            this.tableData = res.data.map(val => val)
            this.$emit('cycle', this.tableData)
          }
        })
      },
      showDetail (row) {
        this.dialogVisible = true
        let initDetail = JSON.parse(JSON.stringify(row))
        let intervals = constructCycleInterval(initDetail.cycleBegins, initDetail.cycleEnds, initDetail.cycleInterval, null)
        let tableData = []
        let linkStr
        if (!initDetail.cycleInterval) {
          linkStr = '_M_'
        } else if (initDetail.cycleInterval === 1) {
          linkStr = '_D_'
        } else if (initDetail.cycleInterval === 7) {
          linkStr = '_W_'
        } else {
          linkStr = '_' + initDetail.cycleInterval + '_D_'
        }
        intervals.forEach((item, index) => {
          let temp = JSON.parse(item)
          let obj = {
            name: initDetail.cycleName + linkStr + (index + 1),
            begin: getFormatDateTime(new Date(temp.bDate)),
            end: getFormatDateTime(new Date(temp.eDate))
          }
          tableData.push(obj)
        })
        this.cycleDetailTable = tableData
        if (!this.detail) {
          this.detail = 'detail'
        }
      }
    },
    components: {
      Affix,
      Add,
      CycleTable,
      'detail': Detail
    },
    beforeMount () {
      this.getTableData()
    }
  }
  function constructCycleInterval (begin, end, interval, limit) {
    let intervalArray = []
    let bDate = new Date(Date.parse(begin + ' 00:00:00'))
    let eDate = new Date(Date.parse(end + ' 00:00:00'))
    let tDate = bDate
    let nowDate = new Date()
    let flag = true
    while (flag) {
      flag = tDate <= eDate
      let intervalObj = {}
      intervalObj.bDate = tDate.getTime()
      if (interval) {
        interval = +interval
        tDate.setDate(tDate.getDate() + interval)
      } else {
        tDate.setMonth(tDate.getMonth() + 1)
      }
      if (tDate > eDate) {
        intervalObj.eDate = eDate.getTime() + 86400000
      } else {
        intervalObj.eDate = tDate.getTime()
      }
      if (limit !== null) {
        if (tDate < nowDate && intervalArray.length < limit) {
          intervalArray.push(JSON.stringify(intervalObj))
        } else if (tDate < nowDate && intervalArray.length >= limit) {
          intervalArray.shift()
          intervalArray.push(JSON.stringify(intervalObj))
        } else if (tDate > nowDate && intervalArray.length < limit * 2) {
          intervalArray.push(JSON.stringify(intervalObj))
        } else if (tDate > nowDate && intervalArray.length > limit * 2) {}
      } else {
        intervalArray.push(JSON.stringify(intervalObj))
      }
    }
    intervalArray.pop()
    return intervalArray
  }
</script>

<style lang="stylus" scoped>
  .wapper
    padding 16px
    height calc(100vh - 154px)
    overflow auto
  .detail
    width 100%
</style>
